<html>
<head>

<title>
School Info
</title>

<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="generator" content="Wufoo.com" />

<!-- CSS -->
<link rel="stylesheet" href="../css/structure.css" type="text/css" />
<link rel="stylesheet" href="../css/form.css" type="text/css" />




<script type="text/javascript">

function loadXML(){

	var xhttp=false;
	if (window.XMLHttpRequest)
	  {
	  xhttp=new XMLHttpRequest();
	  }
	else // for IE 5/6
	  {
	  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }

	xhttp.open("POST","/StateListServlet",true);
	xhttp.send();
//	xhttp.onreadystatechange=handleServerResponse(xhttp);

//document.getElementById("demo").innerHTML=xhttp.responseText;
//xmlDoc=xhttp.responseXML;


//alert("Error code: " + xmlDoc.parseError.errorCode)
//x=xmlDoc.getElementsByTagName("country");
//alert("x.length: "+ x.length); 


}

function wait(msecs)
{
	var start = new Date().getTime();
	var cur = start
	while(cur - start <msecs)
	{
	cur = new Date().getTime();
	}
}


function insertOptionBefore(text)
{
  var elSel = document.getElementById('state');
  if (elSel.selectedIndex >= 0) {
    var elOptNew = document.createElement('option');
    elOptNew.text =  text;
    elOptNew.value = text;
    var elOptOld = elSel.options[elSel.selectedIndex];  
    try {
      elSel.add(elOptNew, elOptOld); // standards compliant; doesn't work in IE
    }
    catch(ex) {
      elSel.add(elOptNew, elSel.selectedIndex); // IE only
    }
  }
}

function handleServerResponse(xmlHttpRequest) {
	
//	 alert("xmlHttpRequest.readyState: " + xmlHttpRequest.readyState);
//	 alert("xmlHttpRequest.status" + xmlHttpRequest.status);
//	alert("processing"); 
	//wait(500);
	return function(){
		if (xmlHttpRequest.readyState == 4) {
		
			if (xmlHttpRequest.status == 200) {
				//document.getElementById("demo").innerHTML=xmlHttpRequest.responseText;
				//document.getElementById("state").add("hi");
				insertOptionBefore(xmlHttpRequest.responseText);
				//alert(xmlHttpRequest.responseText);
			}
			else {
				alert("Error during AJAX call. Please try again");
			}
		}
	}

}


//////////////////////////////////////////////////////////////////////
// This is code to dynamically populate the state field of the form 
// with the selection of the country field.
//////////////////////////////////////////////////////////////////////

function setOptions(chosen) {
alert ("In Javascript Function setOption");
var selbox = document.schoolForm.state;
 
selbox.options.length = 0;
if (chosen == " ") {
  selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
 
}
if (chosen == "1") {
  selbox.options[selbox.options.length] = new Option('Alaska','AK');
  selbox.options[selbox.options.length] = new Option('Alabama','AL');
  selbox.options[selbox.options.length] = new Option('Arizona','AZ');
  selbox.options[selbox.options.length] = new Option('Arkansas','AR');
}
if (chosen == "2") {
  selbox.options[selbox.options.length] = new Option('Shanghai','SH');
  selbox.options[selbox.options.length] = new Option('Beijing','BE');
}
if (chosen == "3") {
  selbox.options[selbox.options.length] = new Option('Assam','AS');
  selbox.options[selbox.options.length] = new Option('Bihar','BI');
  selbox.options[selbox.options.length] = new Option('Goa','GO');
}
}




function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}


function pressButton()
{
alert("pressed button");
}

</script>
</head>
<body>

<h1>My First Web Page</h1>
<p id="demo">This is a paragraph.</p>

<button type="button" onclick="displayDate()">Display Date</button>

<p id ="xml"> XML display </p>

<button type="button" onclick="loadXML()">Load XML</button>

<div id="container">
<form name = "schoolForm" action="/SchoolInfoServlet" method="post" id="form125">
<header id="header" class="info">
	<h2>Add school information to database</h2>
	<div></div>
</header>
<ul>

<li id="foli102" 		class="     ">
	<label class="desc" id="title102" for="Field102">
		Country:
	</label>

	<select name="country" size="1"
	onchange="setOptions(document.schoolForm.country.options[document.schoolForm.country.selectedIndex].value);">
	<option value=" " selected="selected"> </option>
	<option value="1">United States</option>
	<option value="2">China</option>
	<option value="3">India</option>
	</select>

</li>	

<li id="foli102" 		class="     ">
	<label class="desc" id="title102" for="Field102">
		State:
	</label>
	

	<select id="state" name="state" size="1">
	<option value=" " selected="selected"> States </option>

	</select>



	</li>	
		
<li id="foli102" 		class="     ">
	<label class="desc" id="title102" for="Field102">
		Location:
			</label>
	<span>
		<input id="Field102" 			name="placeId" 			type="text" 			class="field text fn" 			value="" 			size="8" 			tabindex="1" 									/>
		<!--<label for="Field102">First</label>-->
	</span>

	</li>
	
	

<li id="foli104" 		class="     ">
	<label class="desc" id="title104" for="Field104">
		School ID:
			</label>
	<div>
		<input id="Field104" 			name="schoolId" 			type="text" 			spellcheck="false" 			class="field text medium" 			value="" 			maxlength="255" 			tabindex="3" 									/> 
	</div>
	</li>

<li id="foli104" 		class="     ">
	<label class="desc" id="title104" for="Field104">
		School Name:
			</label>
	<div>
		<input id="Field104" 			name="schoolName" 			type="text" 			spellcheck="false" 			class="field text medium" 			value="" 			maxlength="255" 			tabindex="3" 									/> 
	</div>
	</li>

<li id="foli105" 		class="     ">
	<label class="desc" id="title105" for="Field105">
		website:
			</label>
	<div>
		<input id="Field105" 			name="website" 			type="text" 			class="field text medium" 			value="" 						maxlength="255" 						tabindex="4" 			onkeyup="" 									/>
			</div>
	</li>

<li id="foli105" 		class="     ">
	<label class="desc" id="title105" for="Field105">
		Total Students:
			</label>
	<div>
		<input id="Field105" 			name="totalStudents" 			type="text" 			class="field text medium" 			value="" 						maxlength="255" 						tabindex="4" 			onkeyup="" 									/>
			</div>
	</li>	
</ul>
	<input type="submit" value="Submit"/>
</form>

</div><!--container-->
</body>
</html> 